<!--
 * @Author: C.
 * @Date: 2021-09-01 13:23:26
 * @LastEditTime: 2021-09-06 17:27:51
 * @Description: file content
-->
<template>
  <Form layout="horizontal" v-bind="formItemLayout">
    <span>x:{{printStore.currentNode.style.x}}</span>
    <span>y:{{printStore.currentNode.style.y}}</span>
    <span>w:{{printStore.currentNode.style.w}}</span>
    <span>h:{{printStore.currentNode.style.h}}</span>
    <FormItem label="字段描述">
      <Textarea v-model:value="printStore.currentNode.label" placeholder="input placeholder" />
    </FormItem>
    <FormItem label="绑定字段">
      <Input v-model:value="printStore.currentNode.prop" placeholder="input placeholder" />
    </FormItem>
    <FormItem label="字体大小">
      <InputNumber v-model:value="printStore.currentNode.style.fontSize" :min="16" :max="50" />
    </FormItem>
    <FormItem label="对齐方式">
      <RadioGroup v-model:value="printStore.currentNode.style.textAlign" button-style="solid">
        <RadioButton value="left">左</RadioButton>
        <RadioButton value="center">中</RadioButton>
        <RadioButton value="right">右</RadioButton>
      </RadioGroup>
    </FormItem>
    <FormItem label="对齐方式">
      <RadioGroup v-model:value="printStore.currentNode.style.fontWeight" button-style="solid">
        <RadioButton value="normal">默认</RadioButton>
        <RadioButton value="bold">加粗</RadioButton>
      </RadioGroup>
    </FormItem>
  </Form>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Form, Input, Textarea, InputNumber, RadioButton, RadioGroup } from 'ant-design-vue';
  import { usePrintStore } from '/@/store/modules/print';
  export default defineComponent({
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      Textarea,
      InputNumber,
      RadioGroup,
      RadioButton,
    },
    setup() {
      let formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 19 } };

      let printStore = usePrintStore();
      return {
        formItemLayout,
        printStore,
      };
    },
  });
</script>
